<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart" class="inMain" style="width: 418px;height: 240px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc5',
		data() {
			return{
				cockpitData:[]
			}
		},
		mounted() {
			this.getList()
			
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
					"normGuid": "cf83245b-876e-4f3e-9561-2873e84bb922",
						"fieldList": [{
					        "key":"statictype",
					        "value":"中国-新材料-美股"
					    }]
					}
				};
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.cockpitData=result.cockpitData
				this.$nextTick(()=>{
					this.myEcharts();
				})
			},
			myEcharts() {
				let xaxisData=this.cockpitData.map(item=>{
					return item.trade_date_month+'月'
				})
				let seriesData=this.cockpitData.map(item=>{
					return item.mktvaltotal.toFixed(4)
				})
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				// let datalist = [{value:10,name:'国家重点实验室'},{value:10,name:'国家工程技术研究中心'},{value:10,name:'国家地方联合工程实验室'},
				// {value:10,name:'省级制造业创新中心'},{value:10,name:'重点院校宁波研究院'}];
				let myColor = ['#04CDF4', '#E3A693', '#D5A4E2', '#FACD91', '#1D96FC']

				//配置图表
				if (myChart == null) {
					myChart = this.$echarts.init(this.$refs.myChart); //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					color: myColor,
					tooltip: {
						trigger: 'axis',
						backgroundColor: "#131313 ",
						borderColor: "#131313 ",
						axisPointer: {
						    type: 'line',
						},
						formatter: function(params){
							var str = `${params[0].name}<br /><span style=font-size:14px>企业市值</span> <span style=color:#00D8FF;font-size:14;font-weight:bold>${params[0].data}亿元</span>`
							return str
							
						},
						textStyle: {
						      color: "#FFFFFF",
							  fontSize:12
						},
					},
					legend: {
						show: false,
					},
					grid: {
						left: '3%',
						right: '10%',
						top: '15%',
						width: "90%",
						height: '80%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: { //坐标轴轴线相关设置。数学上的x轴
							show: true,
							lineStyle: {
								color: '#B1B1B1'
							},
						},
						axisLabel: { //坐标轴刻度标签的相关设置
							show:true,
							textStyle: {
								color: '#DFF8FF',
								fontSize:17
							},
						},
						axisTick: {
							show: false,
						},
						// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
						data:xaxisData
					}],
					yAxis: [{
						// interval:150,
						name: "单位：亿元",
						nameTextStyle: {
						      color: "#99C8FF",
							  fontSize:15
						    },
						splitLine: {
							show: true,
							lineStyle: {
								color: '#556468',
								type: "dashed"
							},
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#B1B1B1"
							}

						},
						axisLabel: {
							show: true,
							textStyle: {
								color: 'rgba(255, 255, 255, 0.6)',
								fontSize:15
							},
						},
						axisTick: {
							show: false,
						},
					}],
					series: [{
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						showAllSymbol: true,
						symbolSize: 0,
						smooth: true,
						lineStyle: {
							normal: {
								color: "#8EF0FF ", // 线条颜色
							},
							borderColor: 'rgba(0,0,0,.4)',
						},
						areaStyle: { //区域填充样式
							normal: {
								//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: "rgba(4, 205, 244, 1)"
									},
									{
										offset: 1,
										color: "rgba(4, 205, 244, 0)"
									}
								], false),
								shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
								shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
							}
						},
						// data: [300, 200, 420, 590, 290, 140,210]
						data:seriesData
					}]
				};
				myChart.setOption(option); //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
					myChart.resize(); //页面大小变化后Echarts也更改大小
				});
			}
		}
	}
</script>


<style>

</style>
